<template>
  <el-row class="chart-home" v-loading="loading">
    <template v-if="!loading">
      <el-col :span="12" style="height: 50%">
        <pie-chart class="chart" :list="chartData.pic" />
      </el-col>
      <el-col :span="12" style="height: 50%">
        <bar-chart class="chart" :list="chartData.tasks" />
      </el-col>
      <el-col :span="24" style="height: 50%">
        <line-chart class="chart" :chart-data="chartData" />
      </el-col>
    </template>
  </el-row>
</template>

<script>
import PieChart from "@/views/chart/PieChart";
import BarChart from "@/views/chart/BarChart";
import LineChart from "@/views/chart/LineChart";
export default {
  name: "ChartHome",
  components: {LineChart, BarChart, PieChart},
  data() {
    return {
      chartData: { pic: [] },
      loading: true
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      this.$get('chart/data')
          .then(res => {
            this.$resultMsg(this, res, '',true)
            if (res.code === 200) {
              const keys = Object.keys(res.data)
              keys.forEach(key => {
                const list = res.data[key]
                this.$set(this.chartData, key, list);
              })
            }
            setTimeout(() => {
              this.loading = false
            }, 300)
          })
    }
  }
}
</script>

<style scoped lang="scss">
  .chart-home {
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    .chart {
      flex: auto;
    }
  }
</style>
